<head>
  <script>
    function loadAnalytics() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.setAttribute("async", "true");
      script.setAttribute("src", "https://www.googletagmanager.com/gtag/js?id=UA-165890546-1");
      document.documentElement.firstChild.appendChild(script);
    }

    if (document.location.host == 'gcode-preview.web.app') {
      loadAnalytics();
  
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-165890546-1');
    }
  </script>
  <title>GCode Preview - Preview a 3d print from a gcode file</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="dnd">☝️ Drop a gcode file here to view it</div>
  <div class="version-box"><a href="https://www.npmjs.com/package/gcode-preview">
    <img src="https://img.shields.io/npm/v/gcode-preview.svg?style=flat"/>
  </a></div>
  <div class="sidebar">
    <div>
      <h1>GCode Preview</h1>
      <h2 class="description">Preview a 3d print from a gcode file</h2>
      <br>
      <section>
        
        file <a id="file-name">loading..</a>
        <div id="layer-count"></div>
        <div id="file-size"></div>
      </section>
      <section>
        <div class="controls">
          <label>End layer</label>&nbsp;<input
            type="range"
            min="1"
            value="0"
            id="end-layer"
          />
        </div>
        <div class="controls">
          <label>Start layer</label>&nbsp;<input
            type="range"
            min="1"
            value="0"
            id="start-layer"
          />
        </div>
        <div class="controls">
          <label for="single-layer-mode">Single layer mode</label
          ><input type="checkbox" id="single-layer-mode" />
        </div>
        <div class="controls">
          <label for="extrusion">Extrusion</label
          ><input type="checkbox" id="extrusion" />
        </div>
        <div class="controls">
          <label for="travel">Travel</label
          ><input type="checkbox" id="travel" />
        </div>
        <div class="controls">
          <label for="highlight">Highlight top layer</label
          ><input type="checkbox" id="highlight" />
        </div>
      </section>
      <section>
        <div  class="controls">
          <label for="drawBuildVolume">Draw build volume</label
          ><input type="checkbox" id="drawBuildVolume" checked />
        </div>
        <div class="controls">
          <label for="buildVolumeX">Build volume (x)</label
          ><input type="number" id="buildVolumeX" step=10 value=150 />
        </div>
        <div  class="controls">
          <label for="buildVolumeY">Build volume (y)</label
          ><input type="number" id="buildVolumeY" step=10 value=150 />
        </div>
        <div  class="controls">
          <label for="buildVolumeZ">Build volume (z)</label
          ><input type="number" id="buildVolumeZ" step=10 value=150 />
        </div>
        
      </section>
      <section>
        <button id=snapshot>Create snapshot</button>
      </section>

      <!-- <section class="experimental">
        <h4>experimental</h4>
        <div class="controls">
          <label for="lineWidth">Line width</label>
          <input id="line-width" type="range" min="0" max="10" step="1" value="2" />
        </div>
      </section> -->
    </div>
    <div>
      <section>
        <br>
        <div>
          
        </div>
        <div>
          <a href="https://github.com/remcoder/gcode-preview">Github repo</a>
        </div>
        <br>
        <div>
          <a
            href="https://github.com/remcoder/gcode-preview/archive/master.zip"
            >Download stable</a>
        </div>
        <div>
          <a
            href="https://github.com/remcoder/gcode-preview/archive/develop.zip"
            >Download latest</a>
        </div>
      </section>
      <section>
        <div>MIT License</div>
        <div>Copyright 2020</div>
        <div><a href="http://github.com/remcoder">Remco Veldkamp</a></div>
      </section>
      <section>
        <div>Want to <a href="https://github.com/remcoder/gcode-preview#donate">donate</a>?</div>
      </section>
    </div>
  </div>

  <canvas id="renderer" class="gcode-previewer"></canvas>
  <script src="three.min.js"></script>
  <script src="OrbitControls.js"></script>
  <script src="canvas2image.js"></script>
  <script src="dist/gcode-preview.js"></script>
  <script src="demo.js"></script>
  <script>
    const gcodeDemo = initDemo();
    loadGCodeFromServer('benchy.gcode');
  </script>
</body>
